import React, { Component, PropTypes } from 'react';
import { Row, Col, Form , Input , Button, TreeSelect} from 'antd'
import { List } from 'immutable'
import noop from 'util/noop'
const FormItem = Form.Item;
//const Option = Select.Option;

class AdvanceSearch extends Component {
    static defaultProps = {
        sections:List.of(),
        onToggle:noop
    }

    constructor(props) {
        super(props);
        
    
    }
    
    render() { 
        const wrapperCol = {span:24};

        const { sections, form, onToggle } = this.props;

        const titleField = form.getFieldDecorator('title')(
            <Input placeholder="请输入文章标题" size="default" />
        )

        const sectionField = form.getFieldDecorator("columnId")(
             <TreeSelect
                treeData={sections.toJS()}
                notFoundContent="未发现相关栏目"
                size="default" 
                showSearch
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="选择文章栏目"
                allowClear
                treeDefaultExpandAll
            />
        )

        // const typeField = form.getFieldDecorator('special')(
        //     <Select size="default" placeholder="选择文章类型" className="search-form-select">
        //         <Option value="Y">专题文章</Option>
        //         <Option value="N">普通文章</Option>
        //     </Select>
        // )
        return (
            <Form className="ant-advanced-search-form" onSubmit={this.handleSubmit}>
                <Row gutter={16}>
                    <Col span={6}>
                         <FormItem
                            wrapperCol={wrapperCol}
                        >
                            {titleField}
                        </FormItem>
                    </Col>
                     <Col span={6}>
                         <FormItem
                            wrapperCol={wrapperCol}
                        >
                            {sectionField}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        {this.props.children}
                        <Button type="primary" htmlType="submit">搜索</Button>
                        <Button onClick={this.reset}>清除条件</Button>
                        &nbsp;
                        <a onClick={onToggle} href="javascript:;">简易搜索</a>
                    </Col>
                </Row>
            </Form>
        );
    }
    reset = () => {
        this.props.form.resetFields();
    }

    handleSubmit = (e) => {
        e.preventDefault();

        this.props.form.validateFields((err,values) => {
            if(err){
                return;
            }

            this.props.onSearch(values);
        })
    }
}

const AdvanceSearchForm = Form.create()(AdvanceSearch)
export default AdvanceSearchForm;